<template>
	<div class="mask1025" v-if="show">
		<!-- <div class="customer">
			<slot name="header"></slot>
			<slot name="content"></slot>
			<div class="customer_bottom">
				<p class="cancel" @click="closeShow">{{$t('tip.Cancel')}}</p>
				<p class="confirm" @click="handleConfirm">{{$t('tip.Confirm')}}</p>
			</div>
		</div> -->
     <div class="popup-container1025 confirm_box">
        <slot name="header" class="title"></slot>
		<slot name="content" class="content_text"></slot>
      <div class="bottom_btn">
        <p @click="closeShow">取消</p>
        <p class="confirm_text1" @click="handleConfirm">確認</p>
      </div>
    </div>
	</div>
</template>

<script setup>
	// import { onLoad } from "@dcloudio/uni-app";
	import { ref,defineProps, defineEmits } from "vue";
	const show = ref(false)
	const emits = defineEmits(['onConfirm']);
	const closeShow = ()=>{
		show.value = false
	}
	const handleConfirm=()=>{
		show.value = false
		emits('onConfirm'); 
	}
	const openShow =()=>{
		show.value = true
	}
	defineExpose({
	  closeShow,
	  openShow
	})
</script>

<style lang="less" scoped>
	.mask1025{
		.confirm_box {
    width: 300px;
    height: auto;
    padding: 0;
    border-radius: 3px;
    // .title {
    //   width: 100%;
    //   text-align: center;
    //   padding: 15px 10px 5px;
    //   color: #fff;
    //   font-size: 18px;
    // }
    // .content_text {
    //   width: 100%;
    //   text-align: center;
    //   padding: 13px 16px 13px;
    //   min-height: 40px;
    //   font-size: 15px;
    //   line-height: 1.4;
    // }
    .bottom_btn {
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #3c3e47;
      p {
        width: 50%;
        text-align: center;
        line-height: 48px;
        font-size: 15px;
        color: hsla(0, 0%, 100%, 0.7);
        cursor: pointer;
      }
      .confirm_text1 {
        color: #589cf8;
        border-left: 1px solid #3c3e47;
      }
    }
  }
	}
	
</style>